
<template>
  <div class="directory-list">
    <div class="search-area">
      <strong>标签名称</strong>
      <el-input v-model="tagName" class="search-input"></el-input>
      <strong>状态</strong>
      <el-select v-model="status" placeholder="请选择" class="status-select">
        <el-option label="启用" value="1"></el-option>
        <el-option label="禁用" value="0"></el-option>
      </el-select>

      <el-button @click="clearSearch" class="clear">清除</el-button>
      <el-button type="primary" @click="search" class="clear">搜索</el-button>
      <el-button
        v-if="subject.id && subject.name"
        class="fan"
        type="text"
        icon="el-icon-back"
        @click="$router.back()"
      >返回目录</el-button>
      <el-button type="success" @click="addfn" class="add-btn">
        <i class="el-icon-edit"></i>新增标签
      </el-button>
    </div>
    <div class="conten">
      <i class="el-icon-info"></i>
      <span class="total">数据一共{{this.total}}条</span>
    </div>
    <div class="directory-table">
      <el-table :data="tableData">
        <el-table-column prop="index" label="序号"></el-table-column>
        <el-table-column prop="subjectName" label="所属学科"></el-table-column>
        <el-table-column prop="tagName" label="标签名称"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column prop="addDate" label="创建日期"></el-table-column>

        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.state === 1 ? '启用' : '禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="isDisabled">
          <template slot-scope="scope">
            <el-button type="text" @click="enable(scope.row)">{{scope.row.state===1?'禁用':'启用'}}</el-button>
            <el-button :disabled="scope.row.state===1" type="text" @click="edit(scope.row)">修改</el-button>
            <el-button
              :disabled="scope.row.state===1||scope.row.totals > 0"
              type="text"
              @click="remove(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 15, 5]"
          :page-size="10"
          layout=" prev, pager, next,sizes, jumper"
          :total="this.total"
        ></el-pagination>
        <lableboxdsq @bb="cc" :dialogFormVisible="dialogFormVisible" :form="aeditt" />
        <el-dialog title="确认删除" :visible.sync="dialogVisible" width="20%" center>
          <div style="text-align: center; font-size: 24px;">
            <i class="el-icon-warning" style="color: #F7BA2A;"></i>
            <span style="margin-left: 10px; font-size: 20px;">此操作将永久删除该标签，是否继续？</span>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="deleteTag">确定</el-button>
          </span>
        </el-dialog>
        <el-dialog width="25%" :visible.sync="dialogForm" @close="cc">
          <template slot="title">
            <div class="dialog-title">新增标签</div>
          </template>
          <el-form>
            <el-form-item :model="editt">
              <span v-if="!subject.id && !subject.name">所属学科</span>
              <el-select
                v-show="!subject.id && !subject.name"
                v-model="editt.subjectName"
                @change="handleChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="obj in arr"
                  :key="obj.id"
                  :label="obj.subjectName"
                  :value="obj.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <span>所属学科</span>

              <el-input
                type="text"
                v-model="directoryName"
                autocomplete="off"
                placeholder="请输入标签名称"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm=false">取 消</el-button>

            <el-button type="primary" @click="submit()">确 认</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { deletelable, start, lenlist, lableaddfnfn } from '../../api/base/directorys'

import lableboxdsq from '../components/lableboxdsq.vue'
export default {
  data () {
    return {
      isDisabled: false,
      tagName: '',
      status: null,
      index: 1,
      currentPage4: 10,
      arr: [],

      page: 1,
      directoryName: '',
      addid: 0,
      editt: {},
      form: {
        page: 1,
        pagesize: 10,
        subjectID: 0
      },
      dialogForm: false,
      dialogFormVisible: false,
      dialogVisible: false,
      id: 0,
      aeditt: {}
    }
  },
  components: {
    lableboxdsq
  },
  props: {
    tableData: {
      type: Array,
      required: true
    },
    total: {
      type: Number,
      required: true
    }
  },
  created () {
    if (this.$route.query.id && this.$route.query.name) {
      this.addid = parseInt(this.$route.query.id)
      this.form.subjectID = this.$route.query.id
      this.aaa()
    } else {
      this.$emit('ye')
    }
  },
  computed: {
    // 学科分类传过来的id
    subject () {
      return this.$route.query || {}
      // return { id: 1 }
    }
  },
  methods: {
    async lenlist () {
      // console.log(a)
      const { data } = await lenlist()
      // console.log(this.data)
      this.arr = data.items
      // console.log(this.arr)
    },
    aaa () {
      // console.log(222)

      this.$emit('ye', this.form)
    },
    cc () {
      this.dialogFormVisible = false
      this.$emit('ye')
    },
    handleSizeChange (val) {
      this.currentPage4 = val

      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      const form = {
        pagesize: this.currentPage4,
        page: val
      }
      // console.log('当前页: 111')
      // console.log(val)
      this.$emit('ye', form)
      // console.log(form)
    },

    search () {
      const form = {
        tagName: this.tagName,
        state: this.status
      }
      this.$emit('ye', form)
      // 进行搜索操作
    },
    clearSearch () {
      this.searchText = ''
      this.status = ''
    },
    async enable (row) {
      await start({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      row.state = row.state === 1 ? 0 : 1

      // this.$emit('ye')
      // 启用操作
      // console.log(row.state)
    },
    handleChange (val) {
      // console.log(val)
      this.addid = val
      // this.form.departmentId = val[val.length - 1]
    },
    addfn () {
      this.dialogForm = true
    },
    edit (row) {
      this.aeditt = row
      // console.log(row)
      this.dialogFormVisible = true
      // 修改操作
      // console.log(this.tableData)
    },
    remove (row) {
      this.dialogVisible = true
      // console.log(row)
      this.id = row.id
      // 删除操作
    },
    async deleteTag () {
      await deletelable({ id: this.id })
      this.dialogVisible = false
      this.$message.success('删除成功')

      this.$emit('ye')
    },
    async  submit () {
      await lableaddfnfn({
        subjectID: this.addid,
        tagName: this.directoryName
      })

      this.$message.success('添加成功')

      this.dialogForm = false

      if (this.$route.query.id && this.$route.query.name) {
        this.aaa()
      } else {
        this.$emit('ye')
      }

      this.editt.subjectName = ''
      this.directoryName = ''
    }
  }
}
</script>

<style scoped>
.directory-list {
  margin: 12px;
  background-color: #fff;
  border-radius: 3px;
}
.block {
  width: 100%;
  padding-top: 10px;
  padding-right: 30px;
  height: 50px;
  text-align: right;
  background-color: #fff;
}
.conten {
  color: #909399;
  height: 34px;

  margin: 15px;
  padding: 10px;
  border-radius: 3px;
  background-color: #f4f4f5;
}
.total {
  padding-left: 10px;
  font-size: 13px;
}
.search-area {
  padding: 15px 15px 15px 35px;
  /* display: flex; */
  /* justify-content: space-between; */
  align-items: center;
  margin-bottom: 20px;
}
.el-form-item {
  display: flex;
}
.el-select,
.el-input {
  width: 290px;
}
.button {
  width: 10px;
}
.dialog-title {
  color: #fff;
  text-align: left;
}
strong {
  font-size: 13px;
  color: #606266;
  margin-right: 14px;
}
.search-input {
  width: 200px;
  margin-right: 50px;
}
.status-select {
  width: 217px;
  margin-right: 10px;
  margin-right: 10px;
}
.clear {
  text-align: center;
  font-size: 10px;
  height: 34px;
  width: 60px;
}
.add-btn {
  font-size: 13px;
  height: 32px;
  width: 100px;
  float: right;
  margin-right: 15px;
  background-color: #67c23a;
  color: #fff;
}
.fan {
  margin-left: 600px;
}
.directory-table {
  width: 100%;
}
</style>
